<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>毕设养老院首页</title>
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/zhengti.css">
    <link rel="stylesheet" href="../static/css/header.css">
    <link rel="stylesheet" href="../static/css/sjfl.css">
    <link rel="stylesheet" href="../static/css/body-qbfl.css">
    <link rel="stylesheet" href="../static/css/body-adv.css">
    <link rel="stylesheet" href="../static/css/body-tel.css">
    <link rel="stylesheet" href="../static/css/footer.css">
    <style>
.wrap{
    float: left;
   width: 1032px;
   height: 480px;
   margin:0px auto;
   overflow: hidden;
   position: relative;
}
.wrap ul{
    position:absolute;
   } 
.wrap ul li img{
   width: 1032px;
   height: 480px;
   }
.wrap ol{
   position:absolute;
   left: 60px;
   bottom:20px;
}
.wrap ol li{
height:20px; 
width: 20px;
background:#fff;
border:solid 1px #fff;
border-radius: 50%;
margin-left:25px;
color:#fff;
float:left;
line-height:20px;
text-align:center;
cursor:pointer;
}
.wrap ol .on{
    background:rgba(0, 0, 0, 0.3);
    color: rgba(0, 0, 0, 0.3);
}

/* 按钮 */
.wrap .btn a {
position: absolute;
top: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
background-color: rgba(0, 0, 0, 0.3);
font:20px/40px "宋体";
text-align: center;
color:white;
text-decoration: none;
font-weight: bold;
} 
.wrap .btn .leftbtn {
left: 20px;
}
.wrap .btn .rightbtn {
right: 20px;
}
.wrap .btn a:hover {
background-color: rgba(0, 0, 0, 0.8);
}
        
</style>

<script type="text/javascript">
    window.onload=function(){
    var wrap=document.getElementById('wrap'),
    pic=document.getElementById('pic').getElementsByTagName("li"),
    list=document.getElementById('list').getElementsByTagName('li'),
    index=0,
    timer=null;
 
 // 定义并调用自动播放函数
 timer = setInterval(autoPlay, 1500);
 
 // 鼠标划过整个容器时停止自动播放
 wrap.onmouseover = function () {
 clearInterval(timer);
 }
 
 // 鼠标离开整个容器时继续播放至下一张
 wrap.onmouseout = function () {
 timer = setInterval(autoPlay, 1500);
 }
 // 遍历所有数字导航实现划过切换至对应的图片
 for (var i = 0; i < list.length; i++) {
 list[i].onmouseover = function () {
 clearInterval(timer);
 index = this.innerText - 1;
 changePic(index);
 };
 };
 
 function autoPlay () {
 if (++index >= pic.length) index = 0;
 changePic(index);
 }
 
 // 定义图片切换函数
 function changePic (curIndex) {
 for (var i = 0; i < pic.length; ++i) {
 pic[i].style.display = "none";
 list[i].className = "";
 }
 pic[curIndex].style.display = "block";
 list[curIndex].className = "on";
 }
 
 };
 </script> 

</head>
<body>
     <div class="xiaomi">
           <!-- header 开始 -->
           <div class="header">

                 <div class="headerleft">
                       <ul>
                           <li style="margin-left: 100px;color: #00b7ee;font-size: 20px">
                              拨打188888888888联系加入我们
                           </li>
<!--                           <li><a href="#">魅族商城</a></li>-->
<!--                           <li><a href="#">Flyme</a></li>-->
<!--                           <li><a href="#">专卖店</a></li>-->
<!--                           <li><a href="#">服务</a></li>-->
<!--                           <li><a href="#">社区</a></li>-->
                       </ul>
                 </div>

           </div>
           <!-- header 结束 -->

           <!-- 手机分类栏开始 -->
           <div class="sjfl">
               <div class="login">
                   <img src="./images/logo.png" alt="">
               </div>

               <div class="sjlist">
                   <ul>
                       <li><a href="https://kaijiancare.com/service#rzzn">入住指南</a></li>
                       <li><a href="https://kaijiancare.com/about">关于我们</a></li>
                       <li><a href="https://kaijiancare.com/story">养老资讯</a></li>
                       <li><a href="https://kaijiancare.com/contactus">联系我们</a></li>
                   </ul>
               </div>
               <div class="search">
                    <a  href="http://localhost:8080/login"  style="border-radius: 4px;width: 100px;display: inline-block;
                                            margin-top: 10px;border: 1px solid deepskyblue;background: beige ">去登录----></a>
               </div>
                
           </div>
           <!-- 手机分类栏结束 -->
                 
           <!--身体开始  -->
           <div class="body">

                <div class="fenlie">
                    <ul>
                        <li>全部分类</li>
                        <li class="l1">
                            <a href="https://kaijiancare.com/service#fw_spe">服务特色</a>
                            <div class="tel-sort">
                                <ul class="l2">
                                    <li >价格区域</li>
                                    <li>500-1000元</li>
                                    <li>1000-1500元</li>
                                    <li>1500-3000元</li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="https://kaijiancare.com/story">我的故事</a></li>
                        <li><a href="https://kaijiancare.com/news">社区新闻</a></li>
                        <li><a href="https://kaijiancare.com/life_activity">社区活动</a></li>
                        <li><a href="https://kaijiancare.com/customer-voices">长者心声</a></li>
                        <li><a href="https://kaijiancare.com/case">经典案例</a></li>
                    </ul>
                </div>
                 <!-- 轮播图展示 -->
                <div class="wrap" id='wrap'>
                    <ul id="pic">
                       <li><img src="https://kaijiancare.com/wp-content/uploads/2019/12/right_service_01_1.jpg" alt=""></li>
                       <li><img src="https://kaijiancare.com/wp-content/uploads/2021/02/1.png" alt=""></li>
                       <li><img src="https://kaijiancare.com/wp-content/uploads/2021/02/3.png" alt=""></li>
                       <li><img src="https://kaijiancare.com/wp-content/uploads/2021/01/2-3.png" alt=""></li>
                       <li><img src="https://kaijiancare.com/wp-content/uploads/2021/01/4-2.png" alt=""></li>
                    </ul>
                    <!-- 按钮 -->
                <div class="btn">
                    <a href="javascript:;" class="leftbtn" >&lt;</a>
                    <a href="javascript:;" class="rightbtn">&gt;</a>
                  </div>
                  <!-- 小圆点 -->
                   <ol id="list">
                         <li class="on">1</li>
                         <li>2</li>
                         <li>3</li>
                         <li>4</li>
                         <li>5</li>
                    </ol>
                    <script src="lunbotu.js"></script>
                </div>
               
                <!-- 轮播图结束 -->


                <!-- 底部开始-->
                <div class="footer">

                       <div class="footer-1">

                            <ul>
                                <li style="font-size: 18px;color: black;">关于我们</li>
                                <li><a href="">加入我们</a></li>
                                <li><a href="">联系我们</a></li>
                                <li><a href="">法律声明</a></li>
                            </ul>
                            <ul>
                                <li style="font-size: 18px;color: black;">关注我们</li>
                                <li><a href="">新浪微博</a></li>
                                <li><a href="">腾讯微博</a></li>
                                <li><a href="">QQ空间</a></li>
                                <li><a href="">官方微信</a></li>
                            </ul>
                            <ul class="help">
                                <li>24小时全国服务热线</li>
                                <li>178-111-544136</li>
                                <li><span>...</span>24小时在线客服</li>
                            </ul>
                       </div>
                       <p class="gg">&copy2016 Meizu Telecom Equipment Co., Ltd. All rights reserved. 备案号：粤ICP备13003602号-2 经营许可证编号：粤B2-20130198 营业执照&nbsp;&nbsp;<img src="./images/footer-copy-1.png" alt=""></p>
                </div>
            </div>
           <!--身体结束 -->
        </div>
</body>
</html>